import React from 'react'
import Link from '../ui-components/link'
import '../containers/app/common'
import style from './style.app'
import { Toast, Nav, IconFont } from '../ui-components'


const item= ({label, to, active}) => (
	<Link 
		active={~location.hash.indexOf(to) && active} to={`#/${to}`}
		label={label}
	/>
)


class App extends React.Component {

	state = {
		tab: 'jsx'
	}

	static contextTypes = {
		router: React.PropTypes.object
	}

	render() {
		return (
			<div className={style.root}>
				<IconFont value="ui" className={style.logo} size="34"/>
        {/*
				<div className={style.tab}>
					<Link active={this.state.tab === 'jsx'} onClick={() => this.setState({tab: 'jsx'})} label="JSX" _/>
					<Link active={this.state.tab === 'css'} onClick={() => this.setState({tab: 'css'})} label="CSS" _/>
				</div>
        */}
				{
					this.state.tab === 'jsx'?
					<div
						className={style.nav}
					>
						<div>
							<p>基础组件</p>
							<Nav
								data={
									[
										[
											{label: 'IconFont', to: 'iconfont'},
											{label: 'Link', to:'link'},
											{label: 'Button', to: 'button'},
											{label: 'Input', to: 'input'},
											{label: 'Checkbox', to: 'checkbox'},
											{label: 'Toast', to: 'toast'},
											{label: 'TitleBar', to: 'titleBar'},
											{label: 'SubNav', to: 'subNav'},
											{label: 'Table', to: 'table'},
											{label: 'Modal', to: 'modal'},
											{label: 'Select', to: 'select'},
											{label: 'Loading', to: 'loading'},
											{label: 'Switch', to: 'switch'},
											{label: 'Radio', to: 'radio'},
											{label: 'Range', to: 'range'},
											{label: 'Tip', to: 'tip'},
											{label: 'Tooltip', to: 'tooltip'}
										]
									]
								}
								item={item}
							/>
						</div>
						<div>
							<p>复合组件</p>
							<Nav
								data={
									[
										[
											{label: 'Nav', to: 'nav'},
											{label: 'ImgTxt', to: 'imgtxt'},
											{label: 'PostFrame', to: 'postframe'},
											{label: 'Menu', to: 'menu'},
											{label: 'NavContent', to: 'navcontent'},
											{label: 'Drag & Drop', to: 'dnd'},
											{label: 'Gallery', to: 'gallery'},
                      {label: 'DateSelect', to: 'dateselect'},
                      {label: 'Address', to: 'address'},
                      {label: 'InputList', to: 'inputlist'},
                      {label: 'FileUpload', to: 'fileupload'},
                      {label: 'CropImageUpload', to: 'cropimageupload'},
                      {label: 'TweetInput', to: 'tweetInput'},
                      {label: 'InputList', to: 'inputList'},
                      {label: 'Tabs', to: 'tabs'},
                      {label: 'TreeList', to: 'treelist'},
										]
									]
								}
								item={item}
							/>
						</div>
					</div>
					: 
					<div
						className={style.nav}
					>
						<div>
							<p>mixin</p>
							<Nav
								data={
									[
										[
											{ label: 'form', to: 'form' }
										]
									]
								}
								item={item}
							/>
						</div>
					</div>
				}
        <div className={style.content}>
          { 
            React.Children.map(this.props.children, child => React.cloneElement(child, {
              router: this.context.router
            }))
          }
        </div>
				<Toast/>
			</div>
		)
	}
}

export default App
